var layoutMessage = new i18nMessage('../servlet/I18nMessageServlet?keyPrefix=ui.layout');
var acMessage = new i18nMessage('../servlet/I18nMessageServlet?keyPrefix=ui.accesscontrol');
var menu0 = new i18nMessage('../servlet/I18nMessageServlet?menuType=0');
var menu1 = new i18nMessage('../servlet/I18nMessageServlet?menuType=1');
var workTab;

var treeNodeFromXml = function treeNodeFromXml(xmlDoc){
	var rootNode = new Ext.tree.AsyncTreeNode();
	
	var menuNodes = xmlDoc.getElementsByTagName('menu');
	
	//First level menu
	for(var i = 0; i < menuNodes.length; i ++){
		var menuName = menuNodes[i].attributes[1].nodeValue;
		
		var menuNode = new Ext.tree.TreeNode({
				text: menuName
		});
		rootNode.appendChild(menuNode);
		
		var subMenuNodes = menuNodes[i].getElementsByTagName('subMenu');
		//Second level menu
		for(var j = 0; j < subMenuNodes.length; j ++){
			var subMenuId = subMenuNodes[j].attributes[0].nodeValue;
			var subMenuName = subMenuNodes[j].attributes[1].nodeValue;
			var actionURL = subMenuNodes[j].attributes[2].nodeValue;
			var subMenuNode = new Ext.tree.TreeNode({
				text: subMenuName
			});
			subMenuNode.menuId = subMenuId;
			subMenuNode.actionURL = actionURL;
			subMenuNode.actionName = subMenuName;
			menuNode.appendChild(subMenuNode);
		}
	}
	return rootNode;
}

var addSingleTab = function(actionURL, actionName){
		var timestamp = new Date().getTime();
		actionURL += ('&parentIframeId=' + timestamp); 
		var tab = workTab.add({
			id: 'tab' + timestamp,
            title: actionName,
            iconCls: 'tabs',
            html: '<iframe name="' + timestamp + '" id="' + timestamp + '" src="' + actionURL +'" width="100%" height="100%" frameborder="0"><iframe/>',
            closable:true
        });
		tab.show();
}

var addChangePwdTab = function(id){
		if(workTab.findById('tabchangepwd')){
			workTab.activate(workTab.findById('tabchangepwd'));
			return;
		}
		var timestamp = new Date().getTime();
		var tab = workTab.add({
			id: 'tabchangepwd',
            title: acMessage.get('ui.accesscontrol.changepwd'),
            iconCls: 'tabs',
            html: '<iframe name="' + timestamp + '" id="' + timestamp + '" src="access_control/ac_user_changepwd.html?id=' + id +'" width="100%" height="100%" frameborder="0"><iframe/>',
            closable:true
        });
		tab.show();
}

var addTab;

Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	
	var basicFunctionMenu = new Ext.tree.TreePanel({
    	id: 'tree-panel',
    	title: layoutMessage.get('ui.layout.basic'),
		iconCls: 'basicFunction',
        region:'north',
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,
        
        // tree-specific configs:
        rootVisible: false,
        lines: false,
        singleExpand: false,
        useArrows: true,
        
        root: treeNodeFromXml(menu0.xml)
    });
    
	// Assign the changeLayout function to be called on tree node click.
    basicFunctionMenu.on('click', function(n){
    	var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    	if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
    		//alert('click');
    	}
		if(n.actionURL && n.actionURL != 'null'){
			addTab(n.menuId, n.actionURL, n.actionName);
		}
    });
	
	var advanceFunctionMenu = new Ext.tree.TreePanel({
    	id: 'tree-panel1',
    	title: layoutMessage.get('ui.layout.advance'),
		iconCls: 'advancedFunction',
        region:'north',
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,
        
        // tree-specific configs:
        rootVisible: false,
        lines: false,
        singleExpand: false,
        useArrows: true,
        
        root: treeNodeFromXml(menu1.xml)
    });
    
	// Assign the changeLayout function to be called on tree node click.
    advanceFunctionMenu.on('click', function(n){
    	var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    	if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
    		
    	}
		if(n.actionURL && n.actionURL != 'null'){
			addTab(n.menuId, n.actionURL, n.actionName);
		}
    });
	
	workTab = new Ext.TabPanel({
		            region: 'center',
		            deferredRender: false,
		            activeTab: 0,
					enableTabScroll:true,
		            items: [{
		                contentEl: 'tab1',
		                title: layoutMessage.get('ui.layout.about'),
		                html: '<iframe id="aboutIframe" src="product/product_in_process.html" width="98%" height="100%" frameborder="0"><iframe/>',
		                closable: false,
		                tbar:[new Ext.Action({
		                    text: '&nbsp;&nbsp;' + actionMessage.get('message.action.pnp'),
		                    handler: function(){
		                		var frame = document.getElementById('aboutIframe');
		                		frame.src='product/product_in_process.html';
		                    },
		                    iconCls: 'actionPinP'
		                }),new Ext.Action({
		                    text: actionMessage.get('message.action.ordersend'),
		                    handler: function(){
		                		var frame = document.getElementById('aboutIframe');
		                		frame.src='assistant_information/sys_mbox_list.html?isClosed=02';
		                    },
		                    iconCls: 'actionOrderSend'
		                }),new Ext.Action({
		                    text: actionMessage.get('message.action.alarm'),
		                    handler: function(){
		                		var frame = document.getElementById('aboutIframe');
		                		frame.src='assistant_information/sys_mbox_list.html?isClosed=02';
		                    },
		                    iconCls: 'actionAlarm'
		                }),new Ext.Action({
		                    text: actionMessage.get('message.action.sysmsglist'),
		                    handler: function(){
		                		var frame = document.getElementById('aboutIframe');
		                		frame.src='assistant_information/sys_mbox_list.html?isClosed=02';
		                    },
		                    iconCls: 'unconfirmedIcon'
		                }),new Ext.Action({
		                    text: actionMessage.get('message.action.sysmsglistconfirmed'),
		                    handler: function(){
		                		var frame = document.getElementById('aboutIframe');
		                		frame.src='assistant_information/sys_mbox_confirmed_list.html?isClosed=01';
		                    },
		                    iconCls: 'confirmedIcon'
		                }),new Ext.Action({
		                    text: actionMessage.get('message.action.dustbin'),
		                    handler: function(){
		                		var frame = document.getElementById('aboutIframe');
		                		frame.src='assistant_information/sys_mbox_bin_list.html?ctOperation=03';
		                    },
		                    iconCls: 'dustbinIcon'
		                }),new Ext.Action({
		                    text: actionMessage.get('message.action.mymsg'),
		                    handler: function(){
		                		var frame = document.getElementById('aboutIframe');
		                		frame.src='assistant_information/my_sys_mbox_viewer.html';
		                    },
		                    iconCls: 'myIcon'
		                })],
		                autoScroll: true
		            }]
      			})
	
	
	addTab = function(menuId, actionURL, actionName){
		var timestamp = new Date().getTime();
		if(workTab.findById('tab' + menuId)){
			workTab.activate(workTab.findById('tab' + menuId));
			document.getElementById(framesArray[menuId]).src = actionURL;
			return;
		}
		var tab = workTab.add({
			id: 'tab' + menuId,
            title: actionName,
            iconCls: 'tabs',
            html: '<iframe name="' + timestamp + '" id="' + timestamp + '" src="' + actionURL +'" width="100%" height="100%" frameborder="0"><iframe/>',
            closable:true,
			tbar: getTabAction(timestamp, menuId)
        });
		tab.show();
	}
	
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [new Ext.BoxComponent({ // raw
            region: 'north',
            el: 'north',
            height: 32
        }),
//		 {
//            region: 'south',
//            contentEl: 'south',
//            split: true,
//            height: 100,
//            minSize: 100,
//            maxSize: 200,
//            collapsible: true,
//            title: 'Status',
//            margins: '0 0 0 0'
//        }, 
//		{
//            region: 'east',
//            title: layoutMessage.get('ui.layout.help'),
//            collapsible: true,
//            split: true,
//            width: 225,
//            minSize: 175,
//            maxSize: 400,
//            layout: 'fit',
//            margins: '0 5 0 0',
//            items: {
//				html: '<iframe name="assistantFrame" id="assistantFrame" width="100%" height="100%" frameborder="0"><iframe/>'
//			}
//        },
        {
            region: 'west',
            id: 'west-panel',
            title: layoutMessage.get('ui.layout.menu'),
            split: true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: 'accordion',
            layoutConfig: {
                animate: true
            },
            items: [basicFunctionMenu, advanceFunctionMenu]
        }, workTab]
    });
	
	
	
	processBarInstance.updateMsg('Loading complete......');
	processBarInstance.hide();
});
